<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排名</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            padding: 0 20px;
        }

        .row {
            padding: 50px;
            display: flex;
            justify-content: center;
        }

        .el-button {
            margin: 20px auto;
            width: 200px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>投票排名 --- 总汇</h3>
        <el-table :data="tableData" border>
            <el-table-column prop="rank" label="排名" style="width: 10000" align="center">
            </el-table-column>
            <el-table-column prop="name" label="作品" width="200" align="center">
            </el-table-column>
            <el-table-column prop="ticket" label="票数" width="50" align="center">
            </el-table-column>
        </el-table>
        <el-row class="row">
            <el-button type="primary" @click="refreshBtn">刷新</el-button>
        </el-row>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: []
                };
            },
            methods: {
                refreshBtn() {
                    axios.get('/vote/getResult')
                        .then(res => {
                            this.sortByKey(res.data.data, 'rank')
                            this.tableData = res.data.data
                            this.$message.success("最新数据加载完毕")
                        }).catch(err => { console.log(err) })
                },
                // 排序 小 < 大
                sortByKey(array, key) {
                    return array.sort((a, b) => {
                        let x = a[key];
                        let y = b[key];
                        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                    });
                }
            },
            created() {
                this.refreshBtn()
            },

        })
    </script>
</body>

</html>